<template>
  <div
    ref="refCharts"
    class="chart-box"
    :style="{ height: height, width: width }"
  ></div>
</template>

<script setup>
import { reactive, onMounted, ref, nextTick } from "vue";

import * as echarts from "echarts";
import useEcharts from "@/hooks/useEcharts";
import { _getBgColor } from "./config";

const refCharts = ref(null);

const { chart } = useEcharts();

const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  chartData: {
    type: Object,
    required: true,
  },
});

// 定义变量内容

const state = reactive({});
const data = [];
for (let i = 0; i <8; ++i) {
  data.push(Math.round(Math.random() * 200));
}


function setOptions(chartData) {
  if (chart.value) {
    chart.value.setOption({
      xAxis: {
        data: [
          "xx区1",
          "xx区2",
          "xx区3",
          "xx区4",
          "xx区5",
          "xx区6",
          "xx区7",
          "xx区8",
        ],
        axisLabel: {
          color: "#fff",
          fontSize: 12,
          rotate: 45,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
            width: 1,
            type: "solid",
          },
        },
      },
      yAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
            width: 1,
            type: "solid",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: _getBgColor(),
            width: 1,
            type: "solid",
          },
        },
      },
      grid: {
        left: 10,
        right: 30,
        bottom: 20,
        top: 30,
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        padding: 8,
      },

      series: [
        {
          name: chartData.title[0],
          smooth: true,
          type: "bar",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#fdb4da" },
              { offset: 0.5, color: "#ee6fd5" },
              { offset: 1, color: "#d91cce" },
            ]),
          },
          barWidth: "40%",
          data: data,
          realtimeSort: true,
          animationDuration: 2800,
          animationEasing: "cubicInOut",
        },
      ],
    });
  }
}
function initChart() {
  chart.value = echarts.init(refCharts.value, "macarons");
  setOptions(props.chartData);
}
/*动画*/
function run() {
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000);
    } else {
      data[i] += Math.round(Math.random() * 200);
    }
  } 
  chart.value.setOption({
    series: [
      {
        type: 'bar',
        data
      }
    ]
  });
}
setTimeout(function () {
  run();
}, 0);
setInterval(function () {
  run();
}, 3000);
watchEffect(() => {
  if (props.chartData) {
    setOptions(props.chartData);
  }
});

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});
</script>

<style lang="scss" scoped></style>
